<template>
  <div class="scroll">
    <el-breadcrumb class="ml-10px mt-40px" separator="/">
      <el-breadcrumb-item class="font-size-4" :to="{ path: '/subscribe/subscribeList' }">征订管理</el-breadcrumb-item>
      <el-breadcrumb-item>学校管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="screen flex mt-20px ml-10px justify-between flex-items-end">
      <div class="flex flex-1">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">学校名称</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入学校名称" clearable />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">选择地区</span>
              <el-cascader
                v-model="formInline.school"
                class="cell-input"
                placeholder="请选择或搜索地区"
                :options="options"
                clearable
                filterable
              />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">学校负责人</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入学校负责人" clearable />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">厂商负责人</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入厂商负责人" clearable />
            </div>
          </el-col>
        </el-row>
      </div>
      <a-space>
        <el-button size="default" class="small-btn !border-rd-20px" color="#397dfd" plain>重置</el-button>
        <el-button size="default" class="small-btn !border-rd-20px !pl-50px !pr-50px" color="#397dfd" type="primary">
          查询
        </el-button>
      </a-space>
    </div>
    <!-- 页面 -->
    <div class="mt-40px pl-10px pr-10px pb-20px">
      <el-row :gutter="40" class="gap-row-40px">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="add flex justify-center flex-items-center">
            <div class="cursor-pointer" @click="handleOpen('add')">
              <el-icon size="80" color="#BDBDBD"><Plus /></el-icon>
              <div class="text-center" style="color: #bdbdbd">添加学校</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card-content p-20px pl-40px flex-1">
            <div class="flex flex-items-center justify-between p-5px">
              <el-space class="flex justify-between">
                <div class="flex flex-items-center">
                  <el-icon size="30" color="#3B82FD"><School /></el-icon>
                  <el-text class="w-160px font-bold font-size-16px" truncated>光谷第四初级中学185836</el-text>
                </div>
              </el-space>
              <div class="font-bold ml-10px">
                <el-tooltip content="编辑学校" placement="top">
                  <el-icon size="30" @click="handleOpen('edit')"><Edit /></el-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="time color-#949494 pt-10px pb-10px">
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>所在地区</el-text>
                <el-text class="w-160px line-height-32px" truncated>湖北省/武汉市/青山区</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>创建时间</el-text>
                <el-text class="w-160px line-height-32px" truncated>2024-05-01 00:00:00</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>学校负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>厂商负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
            </div>
            <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
              <el-tooltip content="查看年纪班级" placement="top">
                <router-link :to="{ path: '/subscribe/yearClass' }">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </router-link>
              </el-tooltip>
              <el-tooltip content="售后服务" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="征订列表" placement="top">
                <router-link :to="{ path: '/subscribe/subscribeList' }">
                  <el-icon size="20"><Edit /></el-icon>
                </router-link>
              </el-tooltip>
              <el-tooltip content="订单列表" placement="top">
                <el-icon size="20"><Histogram /></el-icon>
              </el-tooltip>
              <el-tooltip content="查看更多" placement="top">
                <el-popover trigger="click">
                  <template #reference>
                    <el-icon class="cursor-pointer" size="20"><MoreFilled /></el-icon>
                  </template>
                  <div>
                    <p class="cursor-pointer" @click="handleProgress">
                      <router-link :to="{ path: '/goods/goodsList' }">商品列表</router-link>
                    </p>
                    <p class="cursor-pointer">
                      <router-link :to="{ path: '/subscribe/students' }">查看学生</router-link>
                    </p>
                    <p class="cursor-pointer" @click="handleCustomer">导入年级班级</p>
                    <p class="cursor-pointer" @click="handleOpen('edit')">修改学校信息</p>
                    <p class="cursor-pointer" @click="handleDelete">删除学校</p>
                  </div>
                </el-popover>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card-content p-20px pl-40px flex-1">
            <div class="flex flex-items-center justify-between p-5px">
              <el-space class="flex justify-between">
                <div class="flex flex-items-center">
                  <el-icon size="30" color="#3B82FD"><School /></el-icon>
                  <el-text class="w-160px font-bold font-size-16px" truncated>光谷第四初级中学185836</el-text>
                </div>
              </el-space>
              <div class="font-bold ml-10px">
                <el-tooltip content="编辑学校" placement="top">
                  <el-icon size="30"><Edit /></el-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="time color-#949494 pt-10px pb-10px">
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>所在地区</el-text>
                <el-text class="w-160px line-height-32px" truncated>湖北省/武汉市/青山区</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>创建时间</el-text>
                <el-text class="w-160px line-height-32px" truncated>2024-05-01 00:00:00</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>学校负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>厂商负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
            </div>
            <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
              <el-tooltip content="查看年纪班级" placement="top">
                <el-icon size="20"><SwitchButton /></el-icon>
              </el-tooltip>
              <el-tooltip content="售后服务" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="征订列表" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="订单列表" placement="top">
                <el-icon size="20"><Histogram /></el-icon>
              </el-tooltip>
              <el-tooltip content="查看更多" placement="top">
                <el-icon size="20"><MoreFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card-content p-20px pl-40px flex-1">
            <div class="flex flex-items-center justify-between p-5px">
              <el-space class="flex justify-between">
                <div class="flex flex-items-center">
                  <el-icon size="30" color="#3B82FD"><School /></el-icon>
                  <el-text class="w-160px font-bold font-size-16px" truncated>光谷第四初级中学185836</el-text>
                </div>
              </el-space>
              <div class="font-bold ml-10px">
                <el-tooltip content="编辑学校" placement="top">
                  <el-icon size="30"><Edit /></el-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="time color-#949494 pt-10px pb-10px">
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>所在地区</el-text>
                <el-text class="w-160px line-height-32px" truncated>湖北省/武汉市/青山区</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>创建时间</el-text>
                <el-text class="w-160px line-height-32px" truncated>2024-05-01 00:00:00</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>学校负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>厂商负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
            </div>
            <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
              <el-tooltip content="查看年纪班级" placement="top">
                <el-icon size="20"><SwitchButton /></el-icon>
              </el-tooltip>
              <el-tooltip content="售后服务" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="征订列表" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="订单列表" placement="top">
                <el-icon size="20"><Histogram /></el-icon>
              </el-tooltip>
              <el-tooltip content="查看更多" placement="top">
                <el-icon size="20"><MoreFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card-content p-20px pl-40px flex-1">
            <div class="flex flex-items-center justify-between p-5px">
              <el-space class="flex justify-between">
                <div class="flex flex-items-center">
                  <el-icon size="30" color="#3B82FD"><School /></el-icon>
                  <el-text class="w-160px font-bold font-size-16px" truncated>光谷第四初级中学185836</el-text>
                </div>
              </el-space>
              <div class="font-bold ml-10px">
                <el-tooltip content="编辑学校" placement="top">
                  <el-icon size="30"><Edit /></el-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="time color-#949494 pt-10px pb-10px">
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>所在地区</el-text>
                <el-text class="w-160px line-height-32px" truncated>湖北省/武汉市/青山区</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>创建时间</el-text>
                <el-text class="w-160px line-height-32px" truncated>2024-05-01 00:00:00</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>学校负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>厂商负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
            </div>
            <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
              <el-tooltip content="查看年纪班级" placement="top">
                <el-icon size="20"><SwitchButton /></el-icon>
              </el-tooltip>
              <el-tooltip content="售后服务" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="征订列表" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="订单列表" placement="top">
                <el-icon size="20"><Histogram /></el-icon>
              </el-tooltip>
              <el-tooltip content="查看更多" placement="top">
                <el-icon size="20"><MoreFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card-content p-20px pl-40px flex-1">
            <div class="flex flex-items-center justify-between p-5px">
              <el-space class="flex justify-between">
                <div class="flex flex-items-center">
                  <el-icon size="30" color="#3B82FD"><School /></el-icon>
                  <el-text class="w-160px font-bold font-size-16px" truncated>光谷第四初级中学185836</el-text>
                </div>
              </el-space>
              <div class="font-bold ml-10px">
                <el-tooltip content="编辑学校" placement="top">
                  <el-icon size="30"><Edit /></el-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="time color-#949494 pt-10px pb-10px">
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>所在地区</el-text>
                <el-text class="w-160px line-height-32px" truncated>湖北省/武汉市/青山区</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>创建时间</el-text>
                <el-text class="w-160px line-height-32px" truncated>2024-05-01 00:00:00</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>学校负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>厂商负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
            </div>
            <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
              <el-tooltip content="查看年纪班级" placement="top">
                <el-icon size="20"><SwitchButton /></el-icon>
              </el-tooltip>
              <el-tooltip content="售后服务" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="征订列表" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="订单列表" placement="top">
                <el-icon size="20"><Histogram /></el-icon>
              </el-tooltip>
              <el-tooltip content="查看更多" placement="top">
                <el-icon size="20"><MoreFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card-content p-20px pl-40px flex-1">
            <div class="flex flex-items-center justify-between p-5px">
              <el-space class="flex justify-between">
                <div class="flex flex-items-center">
                  <el-icon size="30" color="#3B82FD"><School /></el-icon>
                  <el-text class="w-160px font-bold font-size-16px" truncated>光谷第四初级中学185836</el-text>
                </div>
              </el-space>
              <div class="font-bold ml-10px">
                <el-tooltip content="编辑学校" placement="top">
                  <el-icon size="30"><Edit /></el-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="time color-#949494 pt-10px pb-10px">
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>所在地区</el-text>
                <el-text class="w-160px line-height-32px" truncated>湖北省/武汉市/青山区</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>创建时间</el-text>
                <el-text class="w-160px line-height-32px" truncated>2024-05-01 00:00:00</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>学校负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>厂商负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
            </div>
            <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
              <el-tooltip content="查看年纪班级" placement="top">
                <el-icon size="20"><SwitchButton /></el-icon>
              </el-tooltip>
              <el-tooltip content="售后服务" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="征订列表" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="订单列表" placement="top">
                <el-icon size="20"><Histogram /></el-icon>
              </el-tooltip>
              <el-tooltip content="查看更多" placement="top">
                <el-icon size="20"><MoreFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card-content p-20px pl-40px flex-1">
            <div class="flex flex-items-center justify-between p-5px">
              <el-space class="flex justify-between">
                <div class="flex flex-items-center">
                  <el-icon size="30" color="#3B82FD"><School /></el-icon>
                  <el-text class="w-160px font-bold font-size-16px" truncated>光谷第四初级中学185836</el-text>
                </div>
              </el-space>
              <div class="font-bold ml-10px">
                <el-tooltip content="编辑学校" placement="top">
                  <el-icon size="30"><Edit /></el-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="time color-#949494 pt-10px pb-10px">
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>所在地区</el-text>
                <el-text class="w-160px line-height-32px" truncated>湖北省/武汉市/青山区</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>创建时间</el-text>
                <el-text class="w-160px line-height-32px" truncated>2024-05-01 00:00:00</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>学校负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
              <div class="flex justify-between">
                <el-text class="line-height-32px" truncated>厂商负责人</el-text>
                <el-text class="w-160px line-height-32px" truncated>-</el-text>
              </div>
            </div>
            <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
              <el-tooltip content="查看年纪班级" placement="top">
                <el-icon size="20"><SwitchButton /></el-icon>
              </el-tooltip>
              <el-tooltip content="售后服务" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="征订列表" placement="top">
                <el-icon size="20"><Edit /></el-icon>
              </el-tooltip>
              <el-tooltip content="订单列表" placement="top">
                <el-icon size="20"><Histogram /></el-icon>
              </el-tooltip>
              <el-tooltip content="查看更多" placement="top">
                <el-icon size="20"><MoreFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="flex justify-center pt-60px">
        <el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <AddSchoolModel ref="addSchoolModelRef" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddSchoolModel from './components/addSchoolModel.vue'
const formInline = reactive({
  code: '',
  school: '',
  type: '',
  status: '',
  chooseDate: 1,
  date: ''
})
const options = reactive([
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
])
const currentPage = ref(5)
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
}
const addSchoolModelRef = ref(null)
const handleOpen = (value) => {
  addSchoolModelRef.value.show(value, true)
}
// 删除学校
const handleDelete = () => {
  ElMessageBox.alert('是否要删除该学校?', '提示', {
    confirmButtonText: '确定',
    showCancelButton: true,
    cancelButtonText: '取消',
    buttonSize: 'small',
    callback: (action: Action) => {}
  })
}
</script>

<style scoped lang="scss">
.screen {
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    padding: 1px 8px !important;
    border-radius: 20px;
  }
  :deep(.el-select__wrapper) {
    box-shadow: none !important;
    padding: 8px !important;
    border-radius: 20px;
  }
}
.add {
  height: 100%;
  background: #ececec;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}
.time {
  border-top: 1px solid #c7c7cd;
  border-bottom: 1px solid #c7c7cd;
}
.card-content {
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px 20px 20px 10px;
  border: 1px solid #ffffff;
}
</style>
